import React, { useState, useContext } from "react";
import QuotationContext from "../../context/user/quotationContext";
import QueryContext from "../../context/user/queryContext";
import MaterialContext from "../../context/suppiler/materialContext";
import ScrollPicker from "../../components/ScrollPicker";
import {
  StyleSheet,
  View,
  Text,
  TextInput,
  TouchableOpacity,
  ScrollView,
  Platform,
  StatusBar,
  Dimensions,
  ActivityIndicator,
} from "react-native";
import { AntDesign } from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";

const dimen = Dimensions.get("window");
const width = dimen.width;

const QuotationScreen = () => {
  const processOptions = (arr) => {
    let options = [];
    arr.map((item) => {
      options.push(item.type);
    });
    return options;
  };

  const { quotationData, editData } = useContext(QuotationContext);
  const { queryData, selectPrice } = useContext(QueryContext);
  console.log("结果---", queryData[1][0]);
  const { material } = useContext(MaterialContext);
  // console.log(material);

  // 行业内所有材料
  const categories = material.map((item) => {
    return item.category;
  });
  const AllTypes = [];
  material.map((item, index) => {
    let t_material = processOptions(item.types);
    t_material.unshift("");
    t_material.push("");
    AllTypes.push(t_material);
  });
  categories.unshift("");
  categories.push("");
  const shapeList = ["长方形", "圆形"];
  const [baseCategory, setBaseCategory] = useState(0);
  const [shroudCategory, setShroudCategory] = useState(0);

  // 初始化当前页码
  const [currentPage, setPage] = useState(0);

  const goodsTitle =
    quotationData[currentPage].detail.basePlate.category[1] +
    quotationData[currentPage].detail.basePlate.type[1] +
    "*" +
    quotationData[currentPage].detail.shroudPlate.category[1] +
    quotationData[currentPage].detail.shroudPlate.type[1];

  const [isLoading, setIsLoading] = useState(false);

  return (
    <View style={styles.container}>
      <View
        style={{
          alignItems: "center",
        }}
      >
        <View style={styles.titleView}>
          <View style={{ width: "10%" }}>
            <Ionicons name="ios-time-outline" size={22} color="#fff" />
          </View>
          <View
            style={{
              width: "80%",
              alignItems: "center",
            }}
          >
            <Text style={styles.titleText}>{goodsTitle}</Text>
          </View>
          <View style={{ width: "10%" }}>
            <AntDesign name="bars" size={22} color="#fff" />
          </View>
        </View>
        <ScrollView
          style={styles.scrollViewStyle}
          vertical={true} // 垂直方向
        >
          <View
            style={{
              paddingBottom: 250,
            }}
          >
            <View style={styles.boxView}>
              <View style={styles.boxItem}>
                <View style={styles.itemTitle}>
                  <Text>基板：</Text>
                </View>
                <View style={styles.inputView}>
                  <ScrollPicker
                    options={[categories, AllTypes]}
                    selectedIndex={[0, 0]}
                    onSubmit={(index1, category, index2, type) => {
                      setBaseCategory(index1);
                      quotationData[currentPage].detail.basePlate.category[1] =
                        category;
                      quotationData[currentPage].detail.basePlate.category[0] =
                        index1;
                      quotationData[currentPage].detail.basePlate.type[0] =
                        index2;
                      quotationData[currentPage].detail.basePlate.type[1] =
                        type;
                      quotationData[currentPage].type =
                        category +
                        quotationData[currentPage].detail.shroudPlate
                          .category[1];
                      editData(currentPage, quotationData[currentPage]);
                    }}
                  ></ScrollPicker>
                </View>
                {/* {categories.map((category, index) => {
                  return (
                    <TouchableOpacity
                      key={index}
                      onPress={() => {
                        setBaseCategory(index);
                        quotationData[
                          currentPage
                        ].detail.basePlate.category[1] = category;
                        quotationData[
                          currentPage
                        ].detail.basePlate.category[0] = index;
                        quotationData[currentPage].detail.basePlate.type[0] =
                          -1;
                        quotationData[currentPage].detail.basePlate.type[1] =
                          "任意型号";
                        quotationData[currentPage].type =
                          category +
                          quotationData[currentPage].detail.shroudPlate
                            .category[1];
                        editData(currentPage, quotationData[currentPage]);
                      }}
                    >
                      <View
                        style={
                          quotationData[currentPage].detail.basePlate
                            .category[0] == index
                            ? styles.optionsSelected
                            : styles.optionsView
                        }
                      >
                        <Text
                          style={
                            quotationData[currentPage].detail.basePlate
                              .category[0] == index
                              ? styles.textSelected
                              : styles.optionsText
                          }
                        >
                          {category}
                        </Text>
                      </View>
                    </TouchableOpacity>
                  );
                })} */}
              </View>
              {/* <View style={styles.boxItem}>
                <View style={styles.itemTitle}>
                  <Text>型号：</Text>
                </View>
                <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
                  {processOptions(material[baseCategory].types).map(
                    (type, index) => {
                      return (
                        <TouchableOpacity
                          key={index}
                          onPress={() => {
                            quotationData[
                              currentPage
                            ].detail.basePlate.type[0] = index;
                            quotationData[
                              currentPage
                            ].detail.basePlate.type[1] = type;
                            editData(currentPage, quotationData[currentPage]);
                          }}
                        >
                          <View
                            style={
                              quotationData[currentPage].detail.basePlate
                                .type[0] == index
                                ? styles.optionsSelected
                                : styles.optionsView
                            }
                          >
                            <Text
                              style={
                                quotationData[currentPage].detail.basePlate
                                  .type[0] == index
                                  ? styles.textSelected
                                  : styles.optionsText
                              }
                            >
                              {type}
                            </Text>
                          </View>
                        </TouchableOpacity>
                      );
                    }
                  )}
                </View>
              </View> */}
              <View style={styles.boxItem}>
                <View style={styles.itemTitle}>
                  <Text>厚度：</Text>
                </View>
                <View style={styles.inputView}>
                  <TextInput
                    style={{ marginLeft: 20, height: 27, width: 180 }}
                    value={
                      quotationData[currentPage].detail.basePlate.thickness[0]
                    }
                    keyboardType="numeric"
                    textAlign="center"
                    onChangeText={(text) => {
                      quotationData[currentPage].detail.basePlate.thickness[0] =
                        text;
                      editData(0, quotationData[currentPage]);
                    }}
                    placeholder="请输入基板厚度"
                  />

                  <Text style={{ fontSize: 13 }}>毫米(mm)</Text>
                </View>
              </View>
            </View>

            <View style={styles.boxView}>
              <View style={styles.boxItem}>
                <View style={styles.itemTitle}>
                  <Text>覆板：</Text>
                </View>
                <View style={styles.inputView}>
                  <ScrollPicker
                    selectedIndex={[0, 0]}
                    options={[categories, AllTypes]}
                    onSubmit={(index1, category, index2, type) => {
                      setShroudCategory(index1);
                      quotationData[
                        currentPage
                      ].detail.shroudPlate.category[1] = category;
                      quotationData[
                        currentPage
                      ].detail.shroudPlate.category[0] = index1;
                      quotationData[currentPage].detail.shroudPlate.type[0] =
                        index2;
                      quotationData[currentPage].detail.shroudPlate.type[1] =
                        type;
                      quotationData[currentPage].type =
                        category +
                        quotationData[currentPage].detail.shroudPlate
                          .category[1];
                      editData(currentPage, quotationData[currentPage]);
                    }}
                  ></ScrollPicker>
                </View>
                {/* {categories.map((category, index) => {
                  return (
                    <TouchableOpacity
                      key={index}
                      onPress={() => {
                        setShroudCategory(index);
                        quotationData[
                          currentPage
                        ].detail.shroudPlate.category[1] = category;
                        quotationData[
                          currentPage
                        ].detail.shroudPlate.category[0] = index;
                        quotationData[currentPage].detail.shroudPlate.type[0] =
                          -1;
                        quotationData[currentPage].detail.shroudPlate.type[1] =
                          "任意型号";
                        quotationData[currentPage].type =
                          category +
                          quotationData[currentPage].detail.shroudPlate
                            .category[1];
                        editData(currentPage, quotationData[currentPage]);
                      }}
                    >
                      <View
                        style={
                          quotationData[currentPage].detail.shroudPlate
                            .category[0] == index
                            ? styles.optionsSelected
                            : styles.optionsView
                        }
                      >
                        <Text
                          style={
                            quotationData[currentPage].detail.shroudPlate
                              .category[0] == index
                              ? styles.textSelected
                              : styles.optionsText
                          }
                        >
                          {category}
                        </Text>
                      </View>
                    </TouchableOpacity>
                  );
                })} */}
              </View>
              {/* <View style={styles.boxItem}>
                <View style={styles.itemTitle}>
                  <Text>型号：</Text>
                </View>
                <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
                  {processOptions(material[shroudCategory].types).map(
                    (type, index) => {
                      return (
                        <TouchableOpacity
                          key={index}
                          onPress={() => {
                            quotationData[
                              currentPage
                            ].detail.shroudPlate.type[0] = index;
                            quotationData[
                              currentPage
                            ].detail.shroudPlate.type[1] = type;
                            editData(currentPage, quotationData[currentPage]);
                          }}
                        >
                          <View
                            style={
                              quotationData[currentPage].detail.shroudPlate
                                .type[0] == index
                                ? styles.optionsSelected
                                : styles.optionsView
                            }
                          >
                            <Text
                              style={
                                quotationData[currentPage].detail.shroudPlate
                                  .type[0] == index
                                  ? styles.textSelected
                                  : styles.optionsText
                              }
                            >
                              {type}
                            </Text>
                          </View>
                        </TouchableOpacity>
                      );
                    }
                  )}
                </View>
              </View> */}
              <View style={styles.boxItem}>
                <View style={styles.itemTitle}>
                  <Text>厚度：</Text>
                </View>
                <View style={styles.inputView}>
                  <TextInput
                    style={{ marginLeft: 20, height: 27, width: 180 }}
                    value={
                      quotationData[currentPage].detail.shroudPlate.thickness[0]
                    }
                    keyboardType="numeric"
                    textAlign="center"
                    onChangeText={(text) => {
                      quotationData[
                        currentPage
                      ].detail.shroudPlate.thickness[0] = text;
                      editData(0, quotationData[currentPage]);
                    }}
                    placeholder="请输入覆板厚度"
                  />

                  <Text style={{ fontSize: 13 }}>毫米(mm)</Text>
                </View>
              </View>
            </View>

            <View style={styles.boxView}>
              <View style={styles.boxItem}>
                <View style={styles.itemTitle}>
                  <Text>形状：</Text>
                </View>
                <View
                  style={{
                    flexDirection: "row",
                    flexWrap: "wrap",
                  }}
                >
                  {shapeList.map((tag, index) => {
                    return (
                      <TouchableOpacity
                        key={index}
                        onPress={() => {
                          quotationData[currentPage].detail.specs.shape[1] =
                            tag;
                          quotationData[currentPage].detail.specs.shape[0] =
                            index;
                          editData(0, quotationData[currentPage]);
                        }}
                      >
                        <View
                          style={
                            index ==
                            quotationData[currentPage].detail.specs.shape[0]
                              ? styles.optionsSelected
                              : styles.optionsView
                          }
                        >
                          <Text
                            style={
                              index ==
                              quotationData[currentPage].detail.specs.shape[0]
                                ? styles.textSelected
                                : styles.optionsText
                            }
                          >
                            {tag}
                          </Text>
                        </View>
                      </TouchableOpacity>
                    );
                  })}
                </View>
              </View>
              {quotationData[currentPage].detail.specs.shape[0] == 0 ? (
                <View>
                  <View style={styles.boxItem}>
                    <View style={styles.itemTitle}>
                      <Text>长度：</Text>
                    </View>
                    <View style={styles.inputView}>
                      <TextInput
                        style={{ marginLeft: 20, height: 27, width: 180 }}
                        value={
                          quotationData[currentPage].detail.specs.length[0]
                        }
                        keyboardType="numeric"
                        textAlign="center"
                        onChangeText={(length) => {
                          quotationData[currentPage].detail.specs.length[0] =
                            length;
                          editData(currentPage, quotationData[currentPage]);
                        }}
                        placeholder="请输入长度"
                      />
                      <Text style={{ fontSize: 13 }}>毫米(mm)</Text>
                    </View>
                  </View>
                  <View style={styles.boxItem}>
                    <View style={styles.itemTitle}>
                      <Text>宽度：</Text>
                    </View>
                    <View style={styles.inputView}>
                      <TextInput
                        style={{ marginLeft: 20, height: 27, width: 180 }}
                        value={quotationData[currentPage].detail.specs.width[0]}
                        keyboardType="numeric"
                        textAlign="center"
                        onChangeText={(length) => {
                          quotationData[currentPage].detail.specs.width[0] =
                            length;
                          editData(currentPage, quotationData[currentPage]);
                        }}
                        placeholder="请输入宽度"
                      />
                      <Text style={{ fontSize: 13 }}>毫米(mm)</Text>
                    </View>
                  </View>
                </View>
              ) : (
                <View style={styles.boxItem}>
                  <View style={styles.itemTitle}>
                    <Text>直径：</Text>
                  </View>
                  <View style={styles.inputView}>
                    <TextInput
                      style={{ marginLeft: 20, height: 27, width: 180 }}
                      value={(
                        quotationData[currentPage].detail.specs.radius[0] * 2
                      ).toString()}
                      keyboardType="numeric"
                      textAlign="center"
                      onChangeText={(text) => {
                        quotationData[currentPage].detail.specs.radius[0] =
                          text / 2;
                        editData(currentPage, quotationData[currentPage]);
                      }}
                      placeholder="请输入直径"
                    />
                    <Text style={{ fontSize: 13 }}>毫米(mm)</Text>
                  </View>
                </View>
              )}

              <View style={styles.boxItem}>
                <View style={styles.itemTitle}>
                  <Text>数量：</Text>
                </View>
                <View style={styles.inputView}>
                  <TextInput
                    style={{ marginLeft: 20, height: 27, width: 222 }}
                    value={quotationData[currentPage].detail.amount}
                    keyboardType="numeric"
                    textAlign="center"
                    onChangeText={(amount) => {
                      quotationData[currentPage].detail.amount = amount;
                      editData(0, quotationData[currentPage]);
                    }}
                    placeholder="请输入数量"
                  />
                  <Text style={{ fontSize: 13 }}>件</Text>
                </View>
              </View>
            </View>

            <View style={styles.boxView}>
              <TouchableOpacity
                onPress={async () => {
                  setIsLoading(true);
                  await editData(quotationData);
                  await selectPrice(quotationData);
                  setIsLoading(false);
                }}
              >
                <View style={styles.btnView}>
                  <Text style={{ color: "#fff" }}>开始计算</Text>
                </View>
              </TouchableOpacity>
            </View>

            {queryData[1][currentPage].length ? (
              <View style={[styles.boxView, { marginTop: 1 }]}>
                <View>
                  <View style={styles.boxItem}>
                    <View style={styles.itemTitle}>
                      <Text>
                        单价：{queryData[1][currentPage][0].price} 元/件
                      </Text>
                    </View>
                  </View>
                  <View style={styles.boxItem}>
                    <View style={styles.itemTitle}>
                      <Text>
                        总价：
                        {quotationData[currentPage].detail.amount
                          ? (
                              queryData[1][currentPage][0].price *
                              quotationData[currentPage].detail.amount
                            ).toFixed(0)
                          : 0}
                      </Text>
                    </View>
                  </View>
                </View>
              </View>
            ) : isLoading ? (
              <View style={[styles.boxView, { marginTop: 15 }]}>
                <ActivityIndicator size="small" color="#51bfe5" />
              </View>
            ) : (
              <View style={[styles.boxView, { marginTop: 1 }]}>
                <View>
                  <View style={styles.boxItem}>
                    <View style={styles.itemTitle}>
                      <Text>暂无结果</Text>
                    </View>
                  </View>
                </View>
              </View>
            )}
          </View>
        </ScrollView>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    height: "100%",
    backgroundColor: "#eee",
  },
  titleView: {
    alignItems: "center",
    // justifyContent: "center",
    backgroundColor: "#51bfe5",
    width: width,
    height: 60,
    paddingLeft: 10,
    flexDirection: "row",
  },
  titleText: {
    fontSize: 16,
    fontWeight: "bold",
    color: "#fff",
  },
  scrollViewStyle: {
    backgroundColor: "#eeeeee",
  },
  boxView: {
    backgroundColor: "#fcfcfc",
    marginTop: 10,
    width: width,
    paddingLeft: 15,
    paddingRight: 15,
    paddingTop: 7,
    paddingBottom: 7,
  },
  boxItem: {
    flexDirection: "row",
    padding: 5,
    // flexWrap: "wrap",
  },
  itemTitle: {
    marginTop: 7,
  },
  optionsView: {
    borderRadius: 5,
    marginTop: 5,
    padding: 4,
    paddingLeft: 10,
    paddingRight: 10,
    // backgroundColor: "#51bfe5",
    backgroundColor: "#fff",
    marginRight: 10,
    elevation: 4, //设置阴影角度，通过这个设置有无阴影
    shadowOffset: {
      // 设置阴影偏移量
      width: 0,
      height: 0,
    },
    shadowRadius: 4, // 设置阴影模糊半径
    shadowOpacity: 0.5, // 设置阴影的不透明度
    shadowColor: "gray", // 设置阴影色
  },
  optionsSelected: {
    borderRadius: 5,
    marginTop: 5,
    padding: 4,
    paddingLeft: 10,
    paddingRight: 10,
    marginRight: 10,
    backgroundColor: "#51bfe5",
  },
  optionsText: {
    color: "#000",
  },
  textSelected: {
    color: "#fff",
  },
  inputView: {
    justifyContent: "center",
    width: "80%",
    borderColor: "#51bfe5",
    borderBottomWidth: 1,
    flexDirection: "row",
    alignItems: "center",
    paddingRight: 10,
  },
  btnView: {
    marginTop: 10,
    marginBottom: 10,
    width: "100%",
    height: 35,
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 3,
    // 浅色
    backgroundColor: "#51bfe5",
  },
});

export default QuotationScreen;
